<template>
  <el-card class="content">
    <div id="topBox" class="chartHeader">
      <h3>表格位移</h3>
      <p>
        当前时间:<span>{{ dqsj }}</span> GPS:<span> {{ sdatabd }}</span>
        GLONASS:<span> {{ sdataglon }}</span>
      </p>
    </div>
    <div id="starChart" class="chartContent"></div>
    <div id="SNRchart" class="chartContent"></div>
  </el-card>
</template>

<script>
import moment from "moment";
import TextTree from "~/components/TextTree";
import Highcharts from "highcharts";
import HighchartMore from "highcharts/highcharts-more";
import exportingInit from "highcharts/modules/exporting";
import BDS_PIC from "../../../../assets/BDS.png";
import GPS_PIC from "../../../../assets/GPS.png";
import GLONASS_PIC from "../../../../assets/GLONASS.png";
import * as constants from "../../../../assets/realTime.config";
exportingInit(Highcharts);
HighchartMore(Highcharts);
let kkchartobj;
let kkchartobj2;
export default {
  name: "SatelliteStatus",
  components: {
    //  TextTree
  },
  data() {
    const datass = constants.skyMapDataList.parameter.list;
    let kkSkyObj = {
      gpsPosition: [],
      bdsPosition: [],
      glonPosition: [],
      gpsSignal: [],
      bdsSignal: [],
      glonSignal: [],
      gpsObj: {},
      bdsObj: {},
      glonObj: {},
    };
    for (let i = 0; i < datass.length; i++) {
      if (datass[i].skyType === "02") {
        kkSkyObj.gpsObj = {
          angel: Math.round(datass[i].azimuth),
          number: "G" + datass[i].sensorNumber,
          cno: Math.round(datass[i].cno),
          elevation: Math.round(datass[i].elevation),
        };
        kkSkyObj.gpsPosition.push(kkSkyObj.gpsObj);
        kkSkyObj.gpsSignal.push(kkSkyObj.gpsObj);
      } else if (datass[i].skyType === "00") {
        kkSkyObj.bdsObj = {
          angel: Math.round(datass[i].azimuth),
          number: "B" + (datass[i].sensorNumber - 100),
          cno: Math.round(datass[i].cno),
          elevation: Math.round(datass[i].elevation),
        };
        kkSkyObj.bdsPosition.push(kkSkyObj.bdsObj);
        kkSkyObj.bdsSignal.push(kkSkyObj.bdsObj);
      } else if (datass[i].skyType === "01") {
        kkSkyObj.glonObj = {
          angel: Math.round(datass[i].azimuth),
          number: "R" + (datass[i].sensorNumber - 64),
          cno: Math.round(datass[i].cno),
          elevation: Math.round(datass[i].elevation),
        };
        kkSkyObj.glonPosition.push(kkSkyObj.glonObj);
        kkSkyObj.glonSignal.push(kkSkyObj.glonObj);
      }
    }
    //信噪图
    return {
      dataObj: kkSkyObj,
      chartsa: kkchartobj2,
      sdata: "",
      sdatabd: "",
      sdataglon: "",
      dqsj: "",
    };
  },
  created() {
    setInterval(() => {
      this.dqsj = moment().format("YYYY-MM-DD HH:mm:ss");
    }, 1000);
  },
  mounted() {
    //星空图
    let StarChartOpt = Highcharts.chart("starChart", {
      chart: {
        backgroundColor: "rgba(0,0,0,0)",
        polar: true,
      },
      style: {
        color: "#333",
      },
      credits: {
        enabled: false, // 禁用版权信息
      },
      title: {
        text: null,
      },
      pane: {
        startAngle: 0,
        endAngle: 360,
      },
      legend: {
        itemDistance: 10,
        symbolPadding: 10,
      },
      xAxis: {
        tickInterval: 30,
        min: 0,
        max: 360,
        labels: {
          style: {
            color: "#333",
          },
        },
      },
      yAxis: {
        min: 0,
        max: 90,
        tickInterval: 30,
        reversed: true,
        showFirstLabel: false,
        showLastLabel: true,
        labels: {
          style: {
            color: "#333",
          },
        },
      },
      exporting: {
        enabled: false,
      },
      tooltip: {
        valueSuffix: "°",
        formatter: function () {
          return (
            "<b>" +
            this.series.name +
            "</b><br/>卫星编号" +
            this.point.number +
            "<br/>卫星高度角" +
            Highcharts.numberFormat(this.point.elevation, 2) +
            "°<br/>卫星方位角" +
            Highcharts.numberFormat(this.x, 2) +
            "°<br/>"
          );
        },
      },
      plotOptions: {
        series: {
          pointStart: 0,
          pointInterval: 1,
        },
        column: {
          pointPadding: 0,
          groupPadding: 0,
        },
      },
      series: [
        {
          type: "scatter",
          name: '<b style="color: #333;">GPS</b>',
          marker: {
            symbol: "url(" + GPS_PIC + ")",
            height: 12,
            width: 12,
          },
        },
        {
          type: "scatter",
          name: '<b style="color: #333;">BDS</b>',
          marker: {
            symbol: "url(" + BDS_PIC + ")",
            height: 12,
            width: 12,
          },
        },
        {
          type: "scatter",
          name: '<b style="color: #333;">GLONASS</b>',
          marker: {
            symbol: "url(" + GLONASS_PIC + ")",
            height: 12,
            width: 12,
          },
        },
      ],
    });
    this.chart = StarChartOpt;
    kkchartobj = StarChartOpt;
    const updatePolrChart = function (data1, data2, data3) {
      let polarChart = kkchartobj;
      let gps = [];
      for (let i = 0; i < data1.length; i++) {
        gps.push({
          x: data1[i].angel,
          y: data1[i].elevation,
          number: data1[i].number,
          elevation: data1[i].elevation,
        });
      }
      polarChart.series[0].setData(gps);

      let bds = [];
      for (let j = 0; j < data2.length; j++) {
        bds.push({
          x: data2[j].angel,
          y: data2[j].elevation,
          number: data2[j].number,
          elevation: data2[j].elevation,
        });
      }
      polarChart.series[1].setData(bds);

      let gls = [];
      for (let k = 0; k < data3.length; k++) {
        gls.push({
          x: data3[k].angel,
          y: data3[k].elevation,
          number: data3[k].number,
          elevation: data3[k].elevation,
        });
      }
      polarChart.series[2].setData(gls);
    };
    updatePolrChart(
      this.dataObj.gpsPosition,
      this.dataObj.bdsPosition,
      this.dataObj.glonPosition
    );
    //信噪比
    let newChart = Highcharts.chart("SNRchart", {
      chart: {
        backgroundColor: "rgba(0,0,0,0)",
        type: "column",
      },
      title: {
        text: null,
      },
      xAxis: {
        type: "category",
        title: {
          text: null,
        },
        labels: {
          style: {
            color: "#333",
          },
          formatter: function () {
            return this.value;
          },
        },
      },
      legend: {
        itemDistance: 10,
        symbolPadding: 10,
      },
      yAxis: {
        min: 0,
        title: {
          text: "SNR (dB)",
          align: "high",
          style: {
            color: "#333",
          },
        },
        labels: {
          style: {
            color: "#333",
          },
          overflow: "justify",
        },
      },
      // color: ['#00bf86', '#9c02f8', '#ffb406'],
      exporting: {
        enabled: false,
      },
      tooltip: {
        valueSuffix: "dB",
        formatter: function () {
          return (
            "<b>" +
            this.series.name +
            "</b><br/>卫星编号" +
            this.point.name +
            "<br/>" +
            Highcharts.numberFormat(this.y, 2) +
            "dB"
          );
        },
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0,
          pointWidth: 10,
        },
      },
      credits: {
        enabled: true,
        text: "",
      },
      series: [
        {
          name: '<b style="color: #333;">GPS</b>',
          color: "#7CB5EC",
        },
        {
          name: '<b style="color: #333;">BDS</b>',
          color: "#90ED7D",
        },
        {
          name: '<b style="color: #333;">GLONASS</b>',
          color: "#434348",
        },
      ],
    });
    this.chart2 = newChart;
    kkchartobj2 = newChart;
    const updateHistogramChart = function (data1, data2, data3) {
      console.log(data1.length, data2.length, data3.length);
      let chartsa = kkchartobj2,
        gps = [],
        bds = [],
        gls = [];

      for (let i = 0; i < data1.length; i++) {
        gps.push({
          name: data1[i].number,
          y: data1[i].cno,
        });
      }
      chartsa.series[0].setData(gps);

      for (let j = 0; j < data2.length; j++) {
        bds.push({
          name: data2[j].number,
          y: data2[j].cno,
        });
      }
      chartsa.series[1].setData(bds);

      for (let k = 0; k < data3.length; k++) {
        gls.push({
          name: data3[k].number,
          y: data3[k].cno,
        });
      }
      chartsa.series[2].setData(gls);
    };
    updateHistogramChart(
      this.dataObj.gpsPosition,
      this.dataObj.bdsPosition,
      this.dataObj.glonPosition
    );
    this.sdata = this.dataObj.gpsPosition.length;
    (this.sdatabd = this.dataObj.bdsPosition.length),
      (this.sdataglon = this.dataObj.glonPosition.length);
  },
  methods: {
    nodeClicked(d, node, tree) {
      console.log(111);
    },
  },
};
</script>

<style scoped>
.content {
  *display: flex;
  /*align-items:center;*/
  /*justify-content:center;*/
  height: 87vh;
  margin-right: 5px;
  overflow: auto;
}
.chartHeader {
  height: 20vh;
  width: 100%;
  /* background: red; */
  text-align: center;
}

.chartContent {
  width: 40%;
  height: 60vh;
  /* background: red; */
  float: left;
  margin-left: 5%;
}
span {
  color: skyblue;
}

/* .chartContent:nth-last-of-type(2) {
  position: absolute;
  right: 0;
} */
</style>